<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{font-size: 60px;}
        div{
width: 200px;
height: 200px;
        }
        .box1{
            background-color: #bfa;
        }
        .box2{
            background-color: orange;
            /* 绝对定位
               - 当元素开启position属性值设置成absolute时，则开启了元素的绝对定位
               绝对定位的特点
                    -开启绝对定位后，如果设置偏移量元素的位置不会发生变化
                    -开启绝对定位后，元素会从文档流中脱离
                    -绝对定位会改变元素的性质行内变成块，宽度被内容撑开
                    -绝对定位会提升元素的层级
                    -绝对定位元素相对于其包含块定位的

            包含块（conteaining block）
                    -正常情况下
                        包含就是当前元素最近的祖先元素

                    绝对定位的包含块
                    包含块是离它最近的开启了定位的祖先元素
                    如果所有元素都没有开启定位，则根元素就是它的包含块
                    html(根元素，初始的包含块)
             */
             position: absolute;
        }
        /* 固定定位 */
        .box3{
            background-color: yellow;
            /* 固定定位
               将元素的position属性设置为fixed则开启了元素的固定定位
               固定定位也是一种绝对定位，所有大部分特点和绝对定位一样
                  唯一不同固定定位参考浏览器的视口选择定位
                  固定定位的元素不会随滚动条滚动而滚动
             */
             position: fixed;
        }
        .box4{
            background-color: teal;
            
        }
        .box5{
            background-color: rgb(13, 22, 201);
        }
    </style>

</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
</body>
</html>